<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField">
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目名称" class="row-padding-bottom">
              <el-input
                v-model="filterField.projectName"
                placeholder="请输入项目名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="专户账号" class="row-padding-bottom">
              <el-input
                v-model="filterField.account"
                placeholder="请输入专户账号"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-form-item>
            <!-- <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="commonBtn"
            ></el-button> -->
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
            <!-- <el-button
              class="commonBut saveBtn funComBut"
              icon="icon iconfont icontianjia"
              @click="addFirstDeposit"
              v-show="isShowAdd"
            ><span class="opetareText">添加项目首次缴存流水</span></el-button> -->
          </el-form-item>
        </el-form>
      </el-row>
      <!-- 列表 -->
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div style="margin-bottom: 24px" v-if="isShowAdd">
          <el-button
            class="commonBut saveBtn funComBut"
            icon="icon iconfont icontianjia"
            @click="addFirstDeposit"
            ><span class="opetareText">添加项目首次缴存流水</span>
          </el-button>
        </div>
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <!-- <el-table-column prop="projectName" label="项目名称" width="200" :formatter="formatTd"></el-table-column> -->
          <el-table-column label="项目名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="bankName"
            label="开户银行"
            align="left"
            :formatter="formatTd"
            min-width="140"
          ></el-table-column>
          <el-table-column
            label="专户账号"
            align="left"
            :formatter="formatTd"
            min-width="160"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.account">{{
                scope.row.account.replace(
                  /^([\s\S]{3})[\s\S]*?([\s\S]{3})$/,
                  '$1**** ****$2'
                )
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="balance"
            label="余额(万元)"
            align="left"
            :formatter="dateForma"
            min-width="160"
          ></el-table-column>
          <el-table-column
            prop="balance"
            label="保底额(万元)"
            align="left"
            :formatter="dateForma"
            min-width="160"
          ></el-table-column>
          <el-table-column
            prop="expensesTotal"
            label="支出(万元)"
            align="left"
            :formatter="dateForma"
            min-width="160"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="left"
            :formatter="formatTd"
            width="110"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                v-show="isShowDetail"
                @click="toDetail(scope.$index, scope.row)"
                >查看流水</el-link
              >
              <span v-show="!isShowDetail">--</span>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关专户数据"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :requestUrl="requestUrl"
          :filterField="filterField"
        ></Pagination>
      </div>
      <!--添加,修改-->
      <el-dialog
        title="添加项目首次缴存流水"
        :visible.sync="formVisible"
        :close-on-click-modal="false"
        @close="handleCloseForm"
        custom-class="dialog-minwidth"
        :modal-append-to-body="false"
        :append-to-body="true"
        width="900px"
      >
        <el-form
          :model="formData"
          label-width="120px"
          :rules="formRules"
          ref="formData"
          class="form mrT8"
        >
          <el-row>
            <el-col :span="12" class="col-position">
              <el-form-item
                label="项目名称："
                class="row-padding-bottom"
                prop="projectId"
              >
                <el-select
                  v-model="formData.projectId"
                  placeholder="请选择"
                  class="dialogDoubleInp"
                  clearable
                  filterable
                  @change="ChangeSearch"
                  @visible-change="visibleChangeProject"
                  :filter-method="selectChange"
                  ref="operateSearch"
                >
                  <el-option
                    v-for="(item, index) of projectOptions"
                    :key="index"
                    :label="item.projectName"
                    :value="index"
                  ></el-option>
                  <div class="block">
                    <el-pagination
                      layout="prev, pager, next"
                      :total="total"
                      :current-page.sync="pageNo"
                      :page-size="pageSizeNumber"
                      @current-change="handleCurrentChange"
                    ></el-pagination>
                  </div>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="col-position">
              <el-form-item
                label="施工方："
                class="row-padding-bottom"
                prop="companyName"
              >
                <span
                  v-if="formData.companyName"
                  class="companyName"
                  :title="formData.companyName"
                  >{{ formData.companyName }}</span
                >
                <span v-else style="color: #999"
                  >请选择项目以后自动获取施工方</span
                >
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="col-position">
              <el-form-item
                label="银行："
                prop="bankName"
                class="row-padding-bottom"
              >
                <el-select
                  v-model="formData.bankName"
                  placeholder="请选择"
                  class="dialogDoubleInp"
                  clearable
                  filterable
                  @change="bankChangeSearch"
                >
                  <el-option
                    v-for="(item, index) of bankList"
                    :key="index"
                    :label="item.bankName"
                    :value="item.bankId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="col-position">
              <el-form-item
                label="专户账号："
                class="row-padding-bottom"
                prop="accountCode"
              >
                <span v-if="formData.accountCode">{{
                  formData.accountCode
                }}</span>
                <span v-else style="color: #999">通过选择银行带入</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="col-position">
              <el-form-item
                label="缴纳/支出："
                class="row-padding-bottom"
                prop="operate"
              >
                <el-select
                  class="dialogDoubleInp"
                  v-model="formData.operate"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="col-position">
              <!-- <el-form-item label="交易金额" class="row-padding-bottom" prop="amount">
                <el-input v-model="formData.amount" @blur="formData.amount = changeValue($event)" placeholder="请输入交易金额"></el-input>
              </el-form-item>-->
              <el-form-item
                label="交易金额："
                class="row-padding-bottom"
                prop="journal"
              >
                <el-input-number
                  style="width: 100%; text-align: left"
                  :precision="2"
                  placeholder="请输入交易金额"
                  v-model="formData.journal"
                  :controls="false"
                  class="dialogDoubleInp"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="col-position">
              <el-form-item
                label="交易日期："
                class="row-padding-bottom"
                prop="createDate"
              >
                <el-date-picker
                  class="dialogDoubleInp"
                  v-model="formData.createDate"
                  type="date"
                  placeholder="选择日期"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="col-position">
              <!-- <el-form-item label="余额" class="row-padding-bottom" prop="balance">
                <el-input v-model="formData.balance" @blur="formData.balance = changeValue($event)" placeholder="请输入交易金额"></el-input>
              </el-form-item>-->
              <el-form-item
                label="余额："
                class="row-padding-bottom"
                prop="balance"
              >
                <el-input-number
                  style="width: 100%; text-align: left"
                  :precision="2"
                  placeholder="请输入交易金额"
                  v-model="formData.balance"
                  :controls="false"
                  :min="0"
                  class="dialogDoubleInp"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="col-position">
              <el-form-item label="备注：" prop="remark">
                <el-input
                  type="textarea"
                  rows="3"
                  class="dialoglargeInp"
                  placeholder="请输入内容"
                  v-model="formData.remark"
                  clearable
                  maxlength="100"
                  show-word-limit
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="handleCloseForm" class="cancel"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click.native="toSaveManualPostback"
            class="save"
            :loading="canLogin"
            >保存</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'hfManualPostback',
  mixins: [scrollTable],
  data() {
    var checkMoney = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('金额不能为空'))
      } else {
        // var rePayTotal = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
        // if (!rePayTotal.test(value) || value == 0.0 || value == 0.00) {
        //   callback(new Error("金额格式不正确,必须大于0,最多带有2位小数"));
        // } else {
        if (value >= 10000000000) {
          callback(new Error('金额需小于100亿'))
        } else {
          callback()
        }
        // }
      }
    }
    return {
      titleText: '流水回传',
      formDataBank: '',
      requestUrl: 'api-acc/account/expand/accountpage', //表格请求路径
      tableList: [],
      idcardImgList: [],
      back: true,
      filterField: {
        projectId: '', //项目名称
        account: '', //专户账号
      },
      options: [
        {
          label: '缴纳',
          value: 'IN',
        },
        {
          label: '支出',
          value: 'OUT',
        },
      ],
      loading: true,
      isShow: false,
      formVisible: false,
      formData: {
        projectId: '',
        projectName: '',
        companyName: '',
        bankName: '',
        zbjBank: undefined,
        journal: undefined,
        balance: undefined,
        operate: '', //缴纳\支出
        createDate: '', //交易日期
        accountCode: '', //专户账号
        remark: '',
      },
      formRules: {
        projectId: [
          { required: true, message: '项目名称不能为空', trigger: 'change' },
        ],
        bankName: [
          { required: true, message: '银行不能为空', trigger: 'change' },
        ],
        operate: [
          { required: true, message: '缴纳/支出不能为空', trigger: 'blur' },
        ],
        journal: [{ required: true, validator: checkMoney, trigger: 'blur' }],
        // amount: [{ required: true, validator: checkMoney, trigger: "blur" }],
        balance: [{ required: true, validator: checkMoney, trigger: 'blur' }],
        createDate: [
          { required: true, message: '交易日期不能为空', trigger: 'change' },
        ],
      },
      projectOptions: [],
      pageSizeNumber: 20,
      total: 0,
      pageNo: 1,
      projectSelect: '',
      formLabelCardWidth: '90px',
      pickerOptions: this.processDate(),
      bankList: [],
      canLogin: false,
      projectId: '',
      isShowDetail: '',
      isShowAdd: '',
    }
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('accountList:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('account:detail') > -1
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('hfManualPostback:add') > -1
  },
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    //项目首次缴存流水
    toSaveManualPostback() {
      const vm = this
      vm.canLogin = true
      // vm.formData.projectId = this.projectId;
      vm.$refs.formData.validate((valid) => {
        if (valid) {
          vm.formData.projectId = this.projectId
          vm.axios({
            method: 'post',
            url: 'api-acc/cusBank/expand/firstCustomAddAccountAccess',
            data: vm.formData,
          })
            .then((response) => {
              vm.canLogin = false
              vm.$refs.pagination.getTableListData()
            })
            .catch((error) => {
              vm.canLogin = false
              vm.$message({
                showClose: true,
                duration: 3000,
                message: '保存首次缴存流水失败',
                type: 'error',
              })
            })
          vm.formVisible = false
        } else {
          vm.canLogin = false
          return false
        }
      })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    //列表查询
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    toDetail(index, row) {
      this.$router.push({
        path: '/home/specialAccount/companyAccountDetail',
        name: 'companyAccountDetail',
        query: {
          projectId: row.projectId,
          projectName: row.projectName,
          path: 'hfManualPostback',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/specialAccount/specialAccountList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    handleCloseForm() {
      this.formVisible = false
      // this.$refs["formData"].resetFields();
    },
    addFirstDeposit() {
      const vm = this
      vm.formVisible = true
      vm.$nextTick(function () {
        vm.$refs['formData'].resetFields()
      })
      //项目名称下拉框
      vm.getProjectList(vm.pageNo, vm.pageSizeNumber)
      vm.getBankList()
    },

    dateForma(row, column) {
      const daterc = row[column.property]
      if (daterc || daterc == '0') {
        // let lately2 = (daterc / 10000).toFixed(3); //对小数点后3位四舍五入
        // return lately2.substring(0, lately2.lastIndexOf(".") + 3);
        return (daterc / 10000).toFixed(2)
      } else {
        return '--'
      }
    },
    processDate() {
      var that = this
      return {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        },
      }
    },
    ChangeSearch(value) {
      //   this.formData.projectId = value.projectId;
      //   this.formData.companyName = value.pbName;
      //   this.formData.projectName = value.projectName;
      this.formData.companyName = ''
      // 自动获取焦点
      this.$nextTick(() => {
        this.$refs.operateSearch.blur()
      })
      var item = this.projectOptions[this.formData.projectId]
      if (item) {
        this.formData.companyName =
          this.projectOptions[this.formData.projectId].pbName
        this.formData.projectName =
          this.projectOptions[this.formData.projectId].projectName
        this.projectId = this.projectOptions[this.formData.projectId].id
      }
    },
    getProjectList(pageNo, pageSizeNumber, val) {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/projectwithoutaccountCustom',
        data: {
          pageNo: pageNo,
          pageSize: pageSizeNumber,
          projectName: val,
          areaId: '',
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.projectOptions = response.data.result.results
              this.total = response.data.result.total
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //选择项目
    visibleChangeProject(val) {
      if (!this.formData.projectId && this.formData.projectId !== 0) {
        if (val) {
          this.pageNo = 1
          this.projectSelect = ''
          this.formData.projectId = ''
          this.getProjectList(
            this.pageNo,
            this.pageSizeNumber,
            this.projectSelect
          )
        }
      } else {
        //手动输入再次打开弹框清空输入值
        // 获取的项目数据索引
        // 选中的项目的具体数据
        if (typeof this.formData.projectId === 'string') {
          this.formData.projectId = ''
        } else {
        }
      }
    },
    selectChange(val) {
      //手动输入掉接口会清空问题下拉框的值，掉完接口再赋值
      this.projectSelect = val
      this.getProjectList(1, this.pageSizeNumber, val)
      if (typeof this.formData.projectId === 'string') {
        this.formData.projectId = val
      }
      this.formData.projectId = val
      // alert(val)
    },
    handleCurrentChange(val) {
      this.getProjectList(val, this.pageSizeNumber, this.projectSelect)
    },
    // 获取银行下拉数据
    getBankList() {
      this.axios({
        method: 'post',
        url: 'api-acc/cusBank/expand/CustomBankAccount',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.bankList = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    bankChangeSearch(value) {
      this.formData.zbjBank = value
      this.axios({
        method: 'post',
        url: 'api-acc/cusBank/expand/setBank',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.formData.accountCode =
                response.data.result.accountCode +
                '-' +
                response.data.result.codeSeq
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
.el-button--primary {
  color: #fff;
  background: #009588;
  border-color: #009588;
}
/deep/ .el-input-number .el-input__inner {
  text-align: left;
}
.container {
  .topCon {
    margin: 0px;
  }

  .companyName {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@import '../../../static/css/filterArea.less';
</style>
